<template>
  <view>
    <view class="top-fixed">
      <view class="top-search clearfix">
        <u-icon name="search" size="32" color="#fb5904"></u-icon>
        <input
          class="top-input"
          confirm-type="search"
          placeholder-class="input-pl"
          placeholder="商品名称、编码"
          type="text"
          v-model="search_form.keyword"
          @confirm="searchData"
        />
        <u-icon
          v-show="search_form.keyword"
          @click="clearKeyword('keyword')"
          class="icon-close"
          name="close"
          size="32"
          color="#999"
        ></u-icon>
      </view>
      <view class="search-sel">
        <view class="search-sel-li">
          <StatusSel
            @pickerChange="pickerStatusChange"
            :options="price_status_list"
          >
            <text class="sel-label sel-name" v-if="effectiveStatusName">{{
              effectiveStatusName
            }}</text>
            <text class="sel-label" v-else>调价状态</text>
            <u-icon
              class="ic-down"
              name="arrow-down"
              size="16"
              color="#fb5904"
            ></u-icon>
          </StatusSel>
        </view>
        <view class="search-sel-li">
          <picker
            mode="date"
            :value="startTime"
            @change="onDateChange('start', $event)"
          >
            <view>
              <text class="sel-label sel-name" v-if="startTime">{{
                startTime
              }}</text>
              <text class="sel-label" v-else>起始日期</text>
              <i
                v-if="startTime"
                class="ibonfont ibonic_searchclosed"
                @click.stop="clearKeyword('startTime')"
              ></i>
              <u-icon
                class="ic-down"
                name="arrow-down"
                size="16"
                color="#fb5904"
              ></u-icon>
            </view>
          </picker>
        </view>
        <view class="search-sel-li">
          <picker
            mode="date"
            :value="endTime"
            @change="onDateChange('end', $event)"
          >
            <view>
              <text class="sel-label sel-name" v-if="endTime">{{
                endTime
              }}</text>
              <text class="sel-label" v-else>结束日期</text>
              <i
                v-if="endTime"
                class="ibonfont ibonic_searchclosed"
                @click.stop="clearKeyword('endTime')"
              ></i>
              <u-icon
                class="ic-down"
                name="arrow-down"
                size="16"
                color="#fb5904"
              ></u-icon>
            </view>
          </picker>
        </view>
      </view>
    </view>
    <view class="container-view">
      <scroll-view
        :lower-threshold="42"
        @scrolltolower="scrollLoading"
        scroll-y
        class="list-ul"
      >
        <view v-for="(item, index) in adjust_price_form" :key="index">
          <view class="list-item clearfix">
            <view>
              <view class="list-label clearfix">
                <view class="float_left list-name">{{ item.goodsName }}</view>
                <view
                  class="float_right status-text"
                  style="color: #22c704"
                  v-if="item.effectiveStatus === 1"
                  @click="effectivePrice(item)"
                >
                  <i
                    class="ibonfont ibonzhinengtiaojia"
                    style="padding-right: 10upx"
                  ></i>
                  生效
                </view>
                <view class="float_right status-text" v-else>已生效</view>
              </view>
              <view class="list-cont">
                <view class="clearfix">
                  <text class="float_left">编码：{{ item.no }}</text>
                </view>
                <view>客户名称：{{ item.customerName }}</view>
                <view>调价日期：{{ $_util.formatDate(item.createTime) }}</view>
                <view>调价人：{{ item.createUserName }}</view>
                <view>相关店铺： {{ item.shopName }}</view>
                <view>
                  <view class="clearfix">
                    <view class="float_left">调整后价格：</view>
                    <view
                      class="float_right success-color"
                      @click="openPrice(item)"
                      >{{ item.isopen ? "收起" : "展开" }}</view
                    >
                  </view>
                  <block v-if="item.isopen">
                    <view
                      v-for="(itemP, indexP) in item.salePrice"
                      :key="indexP"
                      style="padding-left: 30upx"
                    >
                      <text>{{ itemP.unitName }}</text>
                      <text
                        v-for="(itemU, indexU) in itemP.specGroup"
                        :key="indexU"
                        >_{{ itemU.specValueName }}</text
                      >

                      <text
                        v-if="item.salePrice[0].price > 0"
                        :class="[
                          parseInt(item.salePrice[0].adjPricetag) === 1
                            ? 'error-color'
                            : 'success-color',
                        ]"
                      >
                        ：{{
                          parseInt(item.salePrice[0].adjPricetag) === 1
                            ? "-"
                            : "+"
                        }}{{ item.salePrice[0].price }}
                      </text>
                      <text v-else>{{ item.salePrice[0].price }}</text>
                    </view>
                  </block>
                </view>
              </view>
            </view>
          </view>
        </view>
        <u-loadmore
          v-show="loading_status !== 'more'"
          :status="loading_status"
        ></u-loadmore>
      </scroll-view>
      <button
        class="add-btn"
        @click="goPage('/pagesB/goods/CostumeAdjustPriceAdd')"
      >
        新增调价单
      </button>
    </view>
  </view>
</template>

<script>
import StatusSel from "@/components/StatusSel.vue";
import ShopSel from "@/components/ShopSel.vue";

export default {
  components: {
    StatusSel,
    ShopSel,
  },
  onShareAppMessage(options) {},
  data() {
    return {
      user_name: uni.getStorageSync("user_name") || "",
      effectiveStatusName: "",
      timeType: "",
      detalutTime: "",
      startTime: "",
      endTime: "",
      adjust_price_form: [],
      pageSize: 10,
      page: 1,
      pageTotal: 0,
      search_form: {
        keyword: "",
        startTime: "",
        endTime: "",
        effectiveStatus: "",
      },
      loading_status: "noMore",
      price_status_list: [
        {
          label: "全部",
          value: 0,
        },
        {
          label: "已生效",
          value: 2,
        },
        {
          label: "未生效",
          value: 1,
        },
      ],
    };
  },
  onNavigationBarButtonTap() {
    this.goPage("/pages/goods/CostumeAdjustPriceAdd");
  },
  onLoad(options) {
    this.getAllSearch();
  },
  onPullDownRefresh() {
    this.getAllSearch();
  },
  methods: {
    openPrice(item) {
      item.isopen = !item.isopen;
    },
    effectivePrice(row) {
      uni.showModal({
        title: "提示",
        content: "确定要将该调价单生效吗?",
        success: async (res) => {
          if (res.confirm) {
            const { err, data } =
              await this.$u.api.CustomerPriceAdjustmentEffective(row.id, {
                createTime: row.createTime,
                effectiveUserName: this.user_name,
              });
            if (err) return;
            this.$u.toast("操作成功!");
            this.getAllSearch();
          }
        },
      });
    },
    openTime(type) {
      // 兼容旧逻辑，实际已用picker
      this.timeType = type;
    },
    onDateChange(type, e) {
      const date = e.detail.value;
      if (type === "start") {
        this.startTime = date;
        this.search_form.startTime = this.$_util
          ? this.$_util.dateToStamp(date + " 00:00:00")
          : date;
      } else {
        this.endTime = date;
        this.search_form.endTime = this.$_util
          ? this.$_util.dateToStamp(date + " 00:00:00") + 86399
          : date;
      }
      this.searchData();
    },
    // 状态搜索
    pickerStatusChange(row) {
      this.search_form.effectiveStatus = row.value;
      this.effectiveStatusName = row.value ? row.label : "";
      this.searchData();
    },
    scrollLoading() {
      if (this.pageTotal / this.pageSize > this.page) {
        this.page += 1;
        this.getAllSearch();
      } else {
        this.loading_status = "noMore";
      }
    },
    clearKeyword(key) {
      switch (key) {
        case "keyword":
          this.search_form.keyword = "";
          break;
        case "startTime":
          this.startTime = "";
          this.search_form.startTime = "";
          break;
        case "endTime":
          this.endTime = "";
          this.search_form.endTime = "";
          break;
      }

      this.searchData();
    },
    searchData() {
      this.page = 1;
      this.getAllSearch();
    },
    //  搜索
    async getAllSearch() {
      const { err, data, pageTotal } =
        await this.$u.api.CustomerPriceAdjustmentGetAll({
          keyword: this.search_form.keyword,
          startTime: this.search_form.startTime,
          endTime: this.search_form.endTime,
          effectiveStatus: this.search_form.effectiveStatus,
          page: this.page,
          pageSize: this.pageSize,
        });
      uni.stopPullDownRefresh();
      if (err) return;
      const cData = data;
      if (this.page === 1) {
        this.adjust_price_form = cData;
      } else {
        this.adjust_price_form = this.adjust_price_form.concat(cData);
      }
      this.adjust_price_form = this.adjust_price_form.map((item) => {
        return {
          ...item,
          isopen: false,
        };
      });
      this.pageTotal = pageTotal;
    },
  },
};
</script>

<style lang="scss">
$main-color: #fb5904;

.container-view {
  /* #ifdef H5*/
  height: calc(100vh - 230upx);
  /* #endif */
  /* #ifdef MP||APP-PLUS */
  height: calc(100vh - 138upx);
  /* #endif */
  //   transform: translateY(138upx);
  background: #fafafa;
  padding-top: 10rpx;
}

.top-fixed {
  background: #fff;
  box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.03);
  padding-bottom: 16upx;
  border-bottom: 1upx solid #f0f0f0;
}

.top-search {
  display: flex;
  align-items: center;
  padding: 20upx 24upx 0 24upx;
  background: #fff;
  border-radius: 0 0 12upx 12upx;
  .top-input {
    flex: 1;
    margin: 0 16upx;
    height: 60upx;
    border-radius: 30upx;
    background: #f7f7f7;
    padding: 0 24upx;
    font-size: 30upx;
    border: 1upx solid #eee;
    color: #333;
  }
  .icon-close {
    margin-left: 8upx;
  }
}

.input-pl {
  color: #bbb;
}

.search-sel {
  display: flex;
  padding: 16upx 24upx 0 24upx;
  background: #fff;
  .search-sel-li {
    flex: 1;
    display: flex;
    align-items: center;
    margin-right: 16upx;
    background: #f7f7f7;
    border-radius: 30upx;
    padding: 0 18upx;
    height: 56upx;
    font-size: 28upx;
    color: #666;
    position: relative;
    justify-content: center;
    &:last-child {
      margin-right: 0;
    }
    .sel-label {
      color: #666;
      &.sel-name {
        color: $main-color;
        font-weight: 600;
      }
    }
    .ic-down {
      margin-left: 8upx;
    }
    .ibonfont {
      font-size: 28upx;
      color: #bbb;
      margin-left: 8upx;
    }
  }
}

.add-btn {
  position: fixed;
  right: 40upx;
  bottom: 80upx;
  z-index: 99;
  background: $main-color;
  color: #fff;
  border-radius: 50upx;
  padding: 20upx 60upx;
  font-size: 34upx;
  box-shadow: 0 4upx 16upx rgba(34, 199, 4, 0.18);
  border: none;
}

.list-ul {
  padding: 0 24upx;
  .list-item {
    background: #fff;
    border-radius: 16upx;
    margin-bottom: 18upx;
    box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.03);
    padding: 24upx;
    .list-label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .list-name {
        width: 460upx;
        font-size: 32upx;
        font-weight: 600;
        color: #222;
      }
      .status-text {
        font-size: 28upx;
        font-weight: 500;
        cursor: pointer;
        &,
        &.active {
          color: $main-color !important;
        }
      }
    }
    .list-cont {
      margin-top: 16upx;
      font-size: 28upx;
      color: #666;
      .float_left {
        color: #999;
      }
      .success-color {
        color: $main-color !important;
        font-weight: 600;
      }
      .error-color {
        color: #dd524d !important;
        font-weight: 600;
      }
    }
  }
}

.sel-view {
  margin-right: 20upx;
  color: #999;
  font-size: 30upx;

  .ibonxuanze_xuanzhong {
    color: $main-color;
  }
}

.list-cont {
  .error-color,
  .success-color {
    font-weight: 600;
  }
}
</style>
